<template>
    <div>
        <Row :gutter="20">
            <i-col :md="12" :lg="8" :style="{marginBottom: '10px'}">
                <Card style="height:250px">
                    <Row type="flex" class="user-infor">
                        <i-col span="8">
                            <Row class-name="made-child-con-middle" type="flex" align="middle">
                                <img class="avator-img" :src="avatorPath" />
                            </Row>
                        </i-col>
                        <i-col span="16" style="padding-left:6px;">
                            <Row class-name="made-child-con-middle" type="flex" align="middle">
                                <div>
                                    <b class="card-user-infor-name">Admin</b>
                                    <p>{{$t('update')}}</p>
                                </div>
                            </Row>
                        </i-col>
                    </Row>
                    <div class="line-gray"></div>
                    <Row class="margin-top-8">
                        <i-col span="8">
                            <p class="notwrap">上次登录时间:</p>
                        </i-col>
                        <i-col span="16" class="padding-left-8">2017.09.12-13:32:20</i-col>
                    </Row>
                    <Row class="margin-top-8">
                        <i-col span="8">
                            <p class="notwrap">上次登录地点:</p>
                        </i-col>
                        <i-col span="16" class="padding-left-8">北京</i-col>
                    </Row>
                </Card>
            </i-col>
            <i-col :md="12" :lg="16">
                <Row :gutter="10">
                    <i-col :xs="24" :sm="12" :md="8" v-for="(infor, i) in inforCardData" :key="`infor-${i}`" style="height: 120px;margin-bottom: 5px">
                        <infor-card shadow :color="infor.color" :icon="infor.icon" :icon-size="36">
                            <count-to :end="infor.count" count-class="count-style" />
                            <p>{{ infor.title }}</p>
                        </infor-card>
                    </i-col>
                </Row>
            </i-col>

        </Row>
        <Row :gutter="20" style="margin-top: 20px;">
            <i-col :md="12" :lg="12">
                <Card shadow>
                    <chart-pie style="height: 300px;" :value="pieData" text="用户访问来源"></chart-pie>
                </Card>
            </i-col>
            <i-col :md="12" :lg="12">
                <Card shadow>
                    <chart-bar style="height: 300px;" :value="barData" text="每周用户活跃量" />
                </Card>
            </i-col>
        </Row>
        <Row style="margin-top: 20px;">
            <Card shadow>
                <example style="height: 310px;" />
            </Card>
        </Row>
    </div>
</template>

<script>
import InforCard from '_c/info-card'
import CountTo from '_c/count-to'
import {
  ChartPie,
  ChartBar
} from '_c/charts'
import Example from './example.vue'
export default {
  name: 'home',
  components: {
    InforCard,
    CountTo,
    ChartPie,
    ChartBar,
    Example
  },
  computed: {
    avatorPath () {
      return this.$store.state.user.avatorImgPath
    }
  },
  data () {
    return {
      inforCardData: [{
        title: '新增用户',
        icon: 'md-person-add',
        count: 803,
        color: '#2d8cf0'
      },
      {
        title: '累计点击',
        icon: 'md-locate',
        count: 23432,
        color: '#19be6b'
      },
      {
        title: '新增问答',
        icon: 'md-help-circle',
        count: 142,
        color: '#ff9900'
      },
      {
        title: '分享统计',
        icon: 'md-share',
        count: 657,
        color: '#ed3f14'
      },
      {
        title: '新增互动',
        icon: 'md-chatbubbles',
        count: 12,
        color: '#E46CBB'
      },
      {
        title: '新增页面',
        icon: 'md-map',
        count: 14,
        color: '#9A66E4'
      }
      ],
      pieData: [{
        value: 335,
        name: '直接访问'
      },
      {
        value: 310,
        name: '邮件营销'
      },
      {
        value: 234,
        name: '联盟广告'
      },
      {
        value: 135,
        name: '视频广告'
      },
      {
        value: 1548,
        name: '搜索引擎'
      }
      ],
      barData: {
        Mon: 13253,
        Tue: 34235,
        Wed: 26321,
        Thu: 12340,
        Fri: 24643,
        Sat: 1322,
        Sun: 1324
      }
    }
  },
  mounted () {
    //
  }
}
</script>

<style lang="less">
    @import './../../../styles/common.less';
    .count-style {
        font-size: 50px;
    }

    .user-infor {
        height: 135px;
    }

    .avator-img {
        display: block;
        width: 80%;
        max-width: 100px;
        height: auto;
    }

    .card-user-infor-name {
        font-size: 2em;
        color: #2d8cf0;
    }

    .card-title {
        color: #abafbd;
    }

    .made-child-con-middle {
        height: 100%;
    }
</style>
